<!--建设项目登记表 constructSafeRpt-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row class="query-form" >
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="登记日期：" prop="content" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择查询时间段"
                                    @on-change="onSelectQueryDateRange"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label="建设项目名称：" prop="projectName">
                        <Input v-model='dataToQuery.projectName' class="query-form-el"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="承建单位名称：" prop="contractor">
                        <Input v-model='dataToQuery.contractor' class="query-form-el"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='项目状态：'>
                        <Select v-model='dataToQuery.projectStart' @on-change="()=>this.query()" class='query-form-el'>
                            <Option value="0">前期准备中</Option>
                            <Option value="1">建设施工中</Option>
                            <Option value="2">施工已结束</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <download-button :api="exportUrl" :queryForm="dataToQuery" />
                    <!-- <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button> -->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  title="建设项目登记表" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800 :styles="{height:'686px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='企业名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='所在地：' prop='companyAddress'>
                                    <div v-if="mode === 'view'">{{areaCodeToAreaName(dataToView.companyAddress)}}</div>
                                    <div v-else>
                                        <!--<Input v-if="!areaTreeFlag" type='text' @on-focus="areaTreeFlag=true" readonly v-model='dataToView.companyAddressName'></Input>-->
                                        <Cascader :data="tempAreaTree" v-model="dataToView.companyAddressArr" change-on-select :transfer="true"
                                                  :load-data="areaTreeLoadData" :render-format="labels=>labels.join('·')"  :clearable='false'
                                                  @on-change="(value,selectedData)=>{$set(dataToView,'companyAddress',value.join(','))}"></Cascader>
                                    </div>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='建设项目名称：' prop='projectName'>
                                    <div v-if="mode === 'view'">{{dataToView.projectName}}</div>
                                    <Input v-else type='text' v-model='dataToView.projectName'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='项目状态：' prop="projectStart">
                                    <div v-if="mode === 'view'">{{ dataToView.projectStart==='0'?'前期准备中':dataToView.projectStart==='1'?'建设施工中':dataToView.projectStart==='2'?'施工已结束':''}}</div>
                                    <Select v-model='dataToView.projectStart' style="width: 100%">
                                        <Option value="0">前期准备中</Option>
                                        <Option value="1">建设施工中</Option>
                                        <Option value="2">施工已结束</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='建设面积（平方米）：' prop='constractArea'>
                                    <div v-if="mode === 'view'">{{dataToView.constractArea}}</div>
                                    <InputNumber v-else v-model='dataToView.constractArea' class="w"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='施工期限（开始）：' prop='deadline'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.constructStart)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.constructStart' :options="options" editable='false'></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='施工期限（结束）：' prop='deadline'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.deadline)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.deadline'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='环评批复号：' prop='enProcedure'>
                                    <div v-if="mode === 'view'">{{dataToView.enProcedure}}</div>
                                    <Input v-else type='text' v-model='dataToView.enProcedure'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='现场消防安全备案文号和工地食堂营业许可文号：' prop='saProcedure'>
                                    <div v-if="mode === 'view'">{{dataToView.saProcedure}}</div>
                                    <Input v-else type='text' v-model='dataToView.saProcedure'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='消防审图意见文号：' prop='fireProcedure'>
                                    <div v-if="mode === 'view'">{{dataToView.fireProcedure}}</div>
                                    <Input v-else type='text' v-model='dataToView.fireProcedure'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='承建单位名称：' prop='contractor'>
                                    <div v-if="mode === 'view'">{{dataToView.contractor}}</div>
                                    <Input v-else type='text' v-model='dataToView.contractor'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='承建单位作业资质等级：' prop='contractorRank'>
                                    <div v-if="mode === 'view'">{{dataToView.contractorRank}}</div>
                                    <Input v-else type='text' v-model='dataToView.contractorRank'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='发证机关：' prop='authOrgName'>
                                    <div v-if="mode === 'view'">{{dataToView.authOrgName}}</div>
                                    <Input v-else type='text' v-model='dataToView.authOrgName'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='有效期：' prop='validDate'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.validDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.validDate'></DatePicker>
                                </FormItem>
                            </Col>
							<Col span="11">
							<FormItem label='填表人：' prop='registrant'>
								<div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
								<Input v-if="mode === 'add'" type='text' v-model='dataToView.registrant' readonly></Input>
								<Input v-if="mode === 'edit'" type='text' v-model='dataToView.createUserName' readonly></Input>
							</FormItem>
							</Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
							<Col span="11">
							<FormItem label='填表时间：' prop='registTime'>
								<div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
								<DatePicker v-if="mode === 'add'" type="date" placeholder="请选择日期" class="w" v-model='dataToView.registTime'
									readonly></DatePicker>
								<DatePicker v-if="mode === 'edit'" type="date" placeholder="请选择日期" class="w" v-model='dataToView.createDate'
									readonly></DatePicker>
							</FormItem>
							</Col>
							<Col span="11">
							<FormItem label='填表人电话：' prop='createMobile'>
								<div v-if="mode === 'view'">{{dataToView.createMobile}}</div>
								<Input v-if="mode === 'add'" type='text' v-model='dataToView.createMobile'></Input>
								<Input v-if="mode === 'edit'" type='text' v-model='dataToView.createMobile' :readonly="this.currentUser.userId === dataToView.createUserId ? false : 'readonly'"></Input>
							</FormItem>
							</Col>
						</Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='备注：' prop='notes'>
                                    <div v-if="mode === 'view'">{{dataToView.notes}}</div>
                                    <Input v-else type='textarea' v-model='dataToView.notes'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
  import {Api} from '@/api/index.js'
  import {formatDate} from '@/tools/index'
  import _deepclone from 'lodash/cloneDeep'
  import { mapState, mapGetters, mapActions } from 'vuex'
  var cascaderDom = () => import('@/components/cascader-dom.vue');
  import pageCommonFunction from '@/components/pageCommonFunction.js'
  import { sessionStorage } from '@/common/cacheUtils.js'
  export default {
    components:{
      cascaderDom
    },
    computed:{
        ...mapState('trhg', {
            areaMap: state => state.area.areaMap?state.area.areaMap:[],
            areaTreeMap: state => state.area.areaTreeMap?state.area.areaTreeMap:{},
        }),
    },
    data(){
      return {
        ...this.createCommonDataField(),
        tempAreaTree:[],
        columns1: [
          { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
          // { key:'perfAssessNum',title: '绩效考核责任书编号',  align: 'center', width: 100},
            { key:'projectStart',fixed: 'left',title: '项目状态',  align: 'center', width: 120,render: (h, params) => {
                    return h('span', params.row.projectStart==='0'?'前期准备中':params.row.projectStart==='1'?'建设施工中':params.row.projectStart==='2'?'施工已结束':'');
                } },
          { key:'companyName',fixed: 'left',title: '企业名称',  align: 'center', width: 240 },
          { key:'companyAddress',title: '所在地',  align: 'center', width: 120, render: this.renderCellArea},
          { key:'projectName',title: '建设项目名称',  align: 'center', width: 200, tooltip:true},
          { key:'constractArea',title: '建设面积（平方米）',  align: 'center', width: 100 },
            { key:'deadline',title: '施工期限',  align: 'center', width: 180, render: (h, params) => {
                let daterange = this.renderViewDate(params.row.constructStart);
                if(daterange != '') {
                    daterange += " - "
                }
                daterange += this.renderViewDate(params.row.deadline);
                return h('span', daterange);
            } },
          {
            title: '环保安全消防“三同时”手续办理情况',
            align: 'center',
            children: [
              {key: 'enProcedure', title: '环保', align: 'center', width: 120},
              {key: 'saProcedure', title: '安全（职业卫生）', align: 'center', width: 150},
              {key: 'fireProcedure', title: '消防', align: 'center', width: 120},
            ]
          },
          { key:'contractor',title: '承建单位名称',  align: 'center' , width: 150 },
          { key:'contractorRank',title: '承建单位作业资质等级',  align: 'center', width: 120,tooltip:true  },
          { key:'authOrgName',title: '发证机关',  align: 'center', width: 120  },
          { key:'validDate',title: '有效期',  align: 'center', width: 120, render: this.renderCellDate },
           { key:'createDate',title: '登记日期',  align: 'center', width: 120, render: this.renderCellDate },
            this.getActionColumns()
        ],
        ruleCustom : {
          // perfAssessNum: [ { required: true, message: '请填写绩效考核责任书编号', trigger: 'change' } ],
            companyId: [ { required: true, message: '请填写企业名称', trigger: 'change' } ],
          companyAddress: [ { required: true, message: '请填写所在地', trigger: 'change' } ],
          projectName: [ { required: true, message: '请填写建设项目名称', trigger: 'change' } ],
            projectStart: [ { required: true, message: '请选择项目状态', trigger: 'change' } ],
          constractArea: [
              { pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/,message: '建设面积（平方米）必须为数字', trigger: 'change',type:'number'}
          ],
		  createMobile: [{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3675849]\d{9}))$/, required: true, message: '请填写填报人电话', trigger: 'change' }],
          // deadline: [ { type:'date',required: true, message: '请填写施工期限', trigger: 'change' } ],
          // enProcedure: [ { required: true, message: '请填写环保', trigger: 'change' } ],
          // saProcedure: [ { required: true, message: '请填写安全（职业卫生）', trigger: 'change' } ],
          // fireProcedure: [ { required: true, message: '请填写消防', trigger: 'change' } ],
          // contractor: [ { required: true, message: '请填写承建单位名称', trigger: 'change' } ],
          // contractorRank: [ { required: true, message: '请填写承建单位作业资质等级', trigger: 'change' } ],
          // authOrgName: [ { required: true, message: '请填写发证机关', trigger: 'change' } ],
          // validDate: [ {  type:'date',required: true, message: '请填写有效期', trigger: 'change' } ],
          // // notes: [ { required: true, message: '请填写备注', trigger: 'change' } ],
          // rptPeroid: [ { type:'date', required: true, message: '请填写月份', trigger: 'change' } ],
        },
        tableHeight:10,
        // api
        queryUrl:Api.querySafeRptConstruct,
        exportUrl:Api.exportSafeRptConstruct,
        deleteUrl:Api.deleteSafeRptConstruct,
        bthDeleteUrl:Api.batchDeleteSafeRptConstruct,
        getUrl:Api.getSafeRptConstruct,
        updateUrl:Api.updateSafeRptConstruct,
        saveUrl:Api.saveSafeRptConstruct,
		options: {
		    disabledDate (date) {
		        return date && date.valueOf() >= new Date();
		    }
		},
      }
    },
    async mounted() {
        this.setTableHeight();
		this.pageStatus.baseLoading = true
        await this.$store.dispatch('trhg/area/query', {scope:this}, { root: true })
	    this.pageStatus.baseLoading = false
        this.query();
		this.tempAreaTree = this.areaTreeMap['0']
    },
    methods:{
        ...pageCommonFunction,
        beforeEditDialogOpen(data) {
            if(data.row.companyAddress){
                data.row.companyAddressArr = data.row.companyAddress.split(',')
                data.row.companyAddressName = this.areaCodeToAreaName(data.row.companyAddress)
            }
        },
        async afterDataToViewInit(data) {
            if (data && data.companyAddress) {
                let companyAddressArr = data.companyAddress.split(',')
                this.tempAreaTree = []
                setTimeout(() => {
                    this.tempAreaTree = this.addressEditArr(this.areaTreeMap,companyAddressArr)
                }, 100)
            }
        },
        addInfo() {
            this.dataToView = (this.createEmptyDataToAdd instanceof Function) ? this.createEmptyDataToAdd() : {};
            this.dataToView.companyId = this.currentUser.companyId;
            this.dataToView.companyName = this.currentUser.companyName;
            this.dataToView.belongOrgId = this.currentUser.twoLevelOrgId;
            this.dataToView.belongOrgName = this.currentUser.twoLevelOrgName;
            this.dataToView.registrant = this.currentUser.userName;
            this.dataToView.registrantPhone = this.currentUser.mobileNumber;
            this.dataToView.registTime = new Date();
            this.dataToView.createUserId = this.currentUser.userId;
            this.dataToView.createUserName = this.currentUser.userName;
            this.dataToView.createDate = new Date();
            this.mode = 'add';
            this.dialogShow = true;
        },
        deleteData(params) {
            this.deleteDateAjax(params);
        },
        query() {
            this.queryAjax();
        },
        submit(name) {
            this.$set(this.dataToView,'companyAddress',this.dataToView.companyAddressArr.join(','))
            this.submitAjax(name);
        },
        createEmptyDataToAdd() {
            return {
                constractArea: '',
                companyAddressArr:[],
				createMobile: sessionStorage('userId').getObject('userId').mobileNumber,
            }
        }
    },
    watch:{
    },

  }
</script>

<style lang='css' scoped>

</style>
